<template>
  <div v-if="shijuanif">
    <div v-if="isShow">
      <div class="filter-bar" v-if="shijuan">
        <div class="lt" />
        <el-row class="rt" type="flex" justify="end">
          <el-button
            type="primary"
            plain
            size="small"
            @click="chuangjainchuanzhi"
            >创建试卷</el-button
          >
        </el-row>
      </div>
      <!-- 列表 -->
    </div>
    <div class="paper-list" v-if="isShow" v-show="shijuan">
      <!-- 筛选 -->
      <div class="paper-filter">
        <el-form
          :inline="true"
          label-position="right"
          label-width="80px"
          size="small"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="试卷名称">
                <el-input
                  v-model="query.paper_name"
                  placeholder="请输入试卷名称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="归属学科">
                <el-select
                  v-model="query.subject_id"
                  placeholder="请选择学科"
                  clearable
                  @clear="get_list"
                >
                  <el-option
                    v-for="item in treeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="归属目录">
                <el-select
                  v-model="query.directory_id"
                  placeholder="请选择目录"
                  clearable
                >
                  <el-option
                    v-for="item in directoryList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="试卷状态">
                <el-select
                  v-model="query.show_state"
                  placeholder="请选择试卷状态"
                  clearable
                >
                  <el-option label="启用" :value="1" />
                  <el-option label="禁用" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="试卷难度">
                <el-select
                  v-model="query.difficulty"
                  placeholder="请选择难度"
                  clearable
                >
                  <el-option label="简单" :value="1" />
                  <el-option label="中等" :value="2" />
                  <el-option label="较难" :value="3" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="试卷类型">
                <el-select
                  v-model="query.paper_type"
                  placeholder="请选择试卷类型"
                  clearable
                >
                  <el-option label="模拟卷" :value="1" />
                  <el-option label="真题卷" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建时间">
                <el-date-picker
                  v-model="time"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始"
                  end-placeholder="结束"
                  align="right"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建人">
                <el-input
                  v-model="query.create_name"
                  placeholder="请输入创建人"
                />
              </el-form-item>
            </el-col>
            <el-col :span="3" :offset="20">
              <el-button type="primary" size="small" @click="searchsubmit"
                >查询</el-button
              >
              <el-button size="small" @click="searchcancel">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="table-bg">
        <el-table key="6" :data="list" border v-show="!fanhui">
          <el-table-column prop="paper_name" width="280px" label="试卷名称" />
          <el-table-column
            prop="subject_name"
            width="140px"
            align="center"
            label="学科名称"
          />
          <el-table-column
            prop="directory_name"
            width="140px"
            align="center"
            label="目录名称"
          />
          <el-table-column
            prop="paper_type"
            width="90px"
            align="center"
            label="试卷类型"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.paper_type == 1">模拟卷</span>
              <span v-if="scope.row.paper_type == 2">真题卷</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="show_state"
            align="center"
            width="90px"
            label="试卷状态"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.show_state"
                :active-value="1"
                :inactive-value="2"
                @change="change_status(scope.row.id, $event)"
              />
            </template>
          </el-table-column>
          <el-table-column width="90px" align="center" label="分数情况">
            <template slot-scope="scope">
              <span
                >{{ scope.row.pass_score }}/{{ scope.row.total_score }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="difficulty"
            width="90px"
            align="center"
            label="试卷难度"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.difficulty == 1">简单</span>
              <span v-if="scope.row.difficulty == 2">中等</span>
              <span v-if="scope.row.difficulty == 3">较难</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="create_name"
            width="100px"
            align="center"
            label="创建人"
          />
          <el-table-column prop="created_at" width="100px" label="创建时间">
            <template slot-scope="scope">
              {{ scope.row.created_at | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="查看"
                placement="top"
              >
                <!--     @click="$emit('show', scope.row)"-->
                <el-button
                  size="small"
                  type="text"
                  icon="el-icon-view"
                  @click="PaperInfoList(scope.row.id)"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="修改"
                placement="top"
              >
                <el-button
                  size="small"
                  type="text"
                  icon="el-icon-edit"
                  @click="$emit('edit', scope.row)"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="top"
              >
                <el-button
                  size="small"
                  type="text"
                  icon="el-icon-delete"
                  @click="delHandler(scope.row)"
                />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 查看弹窗 -->
    </div>
    <div class="exam-filter" v-else v-show="shijuan">
      <div class="filter-bar">
        <el-row
          type="flex"
          justify="space-between"
          style="border-bottom: 1px solid #dfe6ec; padding-bottom: 5px"
        >
          <el-col>
            <span class="title">试卷名称 ：</span>
            {{ viewData.paper_name }}
          </el-col>
          <el-col :span="2">
            <el-button type="primary" plain size="small" @click="fanhuilist"
              >返回列表</el-button
            >
            <!-- isShow = true -->
          </el-col>
        </el-row>
        <el-row style="padding-top: 30px">
          <el-col :span="6">
            <span class="title">归属学科 ：</span>
            {{ viewData.subject_name }}
          </el-col>
          <el-col :span="6">
            <span class="title">归属目录 ：</span>
            {{ viewData.directory_name }}
          </el-col>
          <el-col :span="6">
            <span class="title">试卷状态 ：</span>
            <el-button
              type="success"
              plain
              v-if="viewData.show_state === 1"
              size="mini"
              >启用</el-button
            >
            <el-button type="info" plain v-else size="mini">禁用</el-button>
          </el-col>
          <el-col :span="6">
            <span class="title">试卷类型 ：</span>
            {{ viewData.paper_type === 1 ? "模拟卷" : "真题卷" }}
          </el-col>
        </el-row>
        <el-row style="padding-top: 10px">
          <el-col :span="6">
            <span class="title">试卷难度 ：</span>
            {{ viewData.difficulty | showQuestShowState }}
          </el-col>
          <el-col :span="6">
            <span class="title">试卷题型 ：</span>
            {{ showQuestType(viewData.quest_type) }}
          </el-col>
          <el-col :span="6">
            <span class="title">试卷总分 ：</span>
            {{ viewData.total_score }}
          </el-col>
          <el-col :span="6">
            <span class="title">及格分数 ：</span>
            {{ viewData.pass_score }}
          </el-col>
        </el-row>
        <el-row
          style="
            padding-top: 10px;
            border-bottom: 1px solid #dfe6ec;
            padding-bottom: 30px;
          "
        >
          <el-col :span="6">
            <span class="title">创建人 ：</span>
            {{ viewData.create_name }}
          </el-col>
          <el-col :span="6">
            <span class="title">创建时间 ：</span>
            {{ viewData.created_at | formatDate }}
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <h3>选题信息</h3>
          </el-col>
        </el-row>
        <el-table key="2" :data="paperData" border style="width: 100%">
          <el-table-column
            prop="name"
            label="题型"
            align="center"
            width="180"
          ></el-table-column>
          <el-table-column label="选题信息">
            <template slot-scope="{ row }">
              共
              <el-input
                style="width: 50px"
                size="small"
                v-model="row.num"
              ></el-input
              >题, 每题
              <el-input
                style="width: 80px"
                size="small"
                v-model="row.score"
              ></el-input
              >分, 已选题数:{{ row.num }} 题
              <el-button type="success" size="small" @click="kanTi(row.id)"
                >看题</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 弹窗? -->

      <!--  -->
      <!-- 试题预览------------- -->
      <el-dialog
        title="试题预览"
        append-to-body
        @close="shijuanisShow = false"
        :visible="shijuanisShow"
        width="75%"
        class="dialog"
        center
      >
        <el-divider>基本信息</el-divider>
        <el-table key="4" :data="question" border style="width: 100%">
          <el-table-column label="选题信息">
            <template slot-scope="{ row }">
              <el-row class="question-row">
                <el-col :span="10"><b>试题编号:</b>{{ row.quest_num }}</el-col>
                <el-col :span="4"
                  ><b>试题类型:</b>{{ row.quest_type | showQuestShowState }}
                </el-col>
                <el-col :span="5"
                  ><b>归属学科:</b>{{ row.subject_name }}
                </el-col>
                <el-col :span="5"
                  ><b>归属目录:</b>{{ row.directory_name }}
                </el-col>
                <el-col :span="10"
                  ><b>标签信息:</b>
                  <span v-for="item in row.tag_info" :key="item"
                    >{{ item }}&nbsp;</span
                  >
                </el-col>
                <el-col :span="4"
                  ><b>发布状态:</b>
                  <el-tag size="small" v-if="row.show_state == 1" type="success"
                    >上架</el-tag
                  >
                  <el-tag size="small" v-if="row.show_state == 2" type="info"
                    >下架</el-tag
                  >
                </el-col>
                <el-col :span="5"
                  ><b>审核人:</b>{{ row.check_username || "暂无" }}
                </el-col>
                <el-col :span="5"
                  ><b>审核状态:</b>
                  <el-tag
                    size="small"
                    v-if="row.check_state == 1"
                    type="warning"
                    >待审核</el-tag
                  >
                  <el-tag
                    size="small"
                    v-if="row.check_state == 2"
                    type="success"
                    >通过</el-tag
                  >
                  <el-tag size="small" v-if="row.check_state == 3" type="info"
                    >不通过</el-tag
                  >
                </el-col>
                <el-col :span="10"
                  ><b>审核意见:</b>
                  {{ row.check_remarks || "暂无" }}
                </el-col>
                <el-col :span="4"><b>创建人:</b>{{ row.create_name }}</el-col>
                <el-col :span="5"
                  ><b>难度系数:</b>
                  <span v-if="row.difficulty == 1">简单</span>
                  <span v-if="row.difficulty == 2">中等</span>
                  <span v-if="row.difficulty == 3">较难</span>
                </el-col>
                <el-col :span="5"
                  ><b>发布时间:</b>{{ row.created_at | formatTime }}
                </el-col>
              </el-row>
              <el-divider>试题信息</el-divider>
              <el-row class="question-row">
                <el-col class="flex">
                  <b>题干信息：</b>
                  <el-link :underline="false" type="primary">
                    <div v-html="row.question"></div>
                  </el-link>
                </el-col>
                <el-col class="flex">
                  <b>选项信息：</b>
                  <!-- 单选/多选/判断 -->
                  <div v-if="row.quest_type != 4">
                    <el-checkbox
                      v-for="(item, index) in toParse(row.quest_options)"
                      :checked="item.is_true"
                      :key="index"
                    >
                      {{ item.code }} {{ item.content }}
                    </el-checkbox>
                  </div>
                  <!-- 简答 -->
                  <div
                    v-html="row.quest_answer"
                    v-if="row.quest_type == 4"
                  ></div>
                </el-col>
              </el-row>
              <el-divider>答案信息</el-divider>
              <el-row class="question-row">
                <el-col class="flex">
                  <b>正确答案：</b>
                  <el-link :underline="false" type="primary">
                    <div v-html="row.quest_answer"></div>
                  </el-link>
                </el-col>
              </el-row>
              <el-row class="question-row">
                <el-col class="flex">
                  <b>答案解析：</b>
                  <div v-html="row.quest_remark"></div>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <!--  -->
      <!--  -->
      <el-dialog
        title="查阅试题"
        @close="kantiShow = false"
        :visible="kantiShow"
        width="75%"
        center
      >
        <el-table key="3" :data="question" border style="width: 100%">
          <el-table-column label="选题信息">
            <template slot-scope="{ row }">
              <el-row class="question-row">
                <el-col :span="2"><b>ID:</b>{{ row.id }}</el-col>
                <el-col :span="22">
                  <b>题干信息：</b>
                  <el-link
                    class="question-name"
                    @click="showInfo(row)"
                    type="primary"
                    v-html="row.question"
                  ></el-link>
                </el-col>
                <el-col :span="4"
                  ><b>归属学科:</b>{{ row.subject_name }}
                </el-col>
                <el-col :span="4"
                  ><b>归属目录:</b>{{ row.directory_name }}
                </el-col>
                <el-col :span="7"
                  ><b>标签信息:</b>
                  <span v-for="item in row.tag_info" :key="item"
                    >{{ item }}&nbsp;</span
                  >
                </el-col>
                <el-col :span="4"
                  ><b>发布状态:</b>
                  <el-tag size="small" v-if="row.show_state == 1" type="success"
                    >上架</el-tag
                  >
                  <el-tag size="small" v-if="row.show_state == 2" type="info"
                    >下架</el-tag
                  >
                </el-col>
                <el-col :span="4"
                  ><b>发布时间:</b>{{ row.created_at | formatDate }}
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
    <!-- 创建试卷 -->
  </div>
  <!--  -->
  <Sinfo v-else :did="edit"></Sinfo>
</template>

<script>
import Sinfo from "./info.vue";
import list from "@/mixins/list";
import { mapGetters, mapActions } from "vuex";
import {
  getPaperList,
  deletePaper,
  changePaperStatus,
  getPaperInfo,
} from "@/api/exam";

const defaultItem = {
  subject_id: "",
  directory_id: "",
  paper_name: "",
  difficulty: "",
  show_state: "",
  paper_type: "",
  create_name: "",
  create_time: "",
  check_state: [],
};
export default {
  components: { Sinfo },
  name: "PaperList",
  mixins: [list],

  data() {
    return {
      shijuanif: true,
      fanhui: false,
      gridData: [],
      activeIndex: 0,
      time: [],
      query: { ...defaultItem },
      paperData: [],
      viewData: {},
      isShow: true, //查看试卷的显示隐藏条件
      kantiShow: false, //看题弹窗隐藏条件
      kantiData: [],
      previewShow: false, // 试题预览显示
      previewInfo: {}, // 预览试题内容
      question: [
        {
          id: "", //id
          subject_name: "", //归属学科
          question: "", //提干
          directory_name: "", //归属目录
          created_at: "", //发布时间
          tag_info: "", //标签信息
          show_state: "", //上架?
        },
      ],
      shijuanisShow: false,
      shijuan: true,
    };
  },
  props: {
    simpleModel: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapGetters({
      treeList: "subject/treeList",
    }),
    directoryList() {
      // 目录信息
      if (!this.query.subject_id) {
        return [];
      } else {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.query.directory_id = "";
        const result = this.treeList.find(
          (val) => val.id === this.query.subject_id
        );
        return result.children;
      }
    },
    createTime() {
      // 创建时间
      if (this.time.length) {
        return this.time.map((val) => val).join(",");
      } else {
        return "";
      }
    },
  },
  created() {
    !this.treeList.length && this.loadTreeList();
  },
  methods: {
    ...mapActions({
      loadTreeList: "subject/loadTreeList",
    }),
    async get_list() {
      try {
        const { query, page, limit } = this;
        query.create_time = this.createTime;
        const res = await getPaperList({ page, limit, ...query });
        this.list = res.list;
        this.total = res.total;
        this.loading = false;
      } catch (error) {
        this.loading = false;
        console.log(error);
      }
    },
    //提交查询
    searchsubmit() {
      this.page = 1;
      this.get_list();
    },
    //重置
    searchcancel() {
      this.query = {
        ...defaultItem,
      };
      this.time = [];
      this.get_list();
    },
    // 删除
    async delHandler(val) {
      // 下架 即可删除
      if (val.show_state === 1)
        return this.$message.warning("禁用情况下才可以删除");
      // 删除操作
      try {
        await this.$confirm("确定删除吗,是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
      } catch (e) {
        return this.$message.info("已取消");
      }
      await deletePaper(val.id);
      this.$message.success("删除成功");
      // 页码退1
      if (this.page * 1 !== 1 && this.list.length === 1) {
        this.page--;
      }
      this.get_list();
    },
    // 修改状态
    async change_status(id, state) {
      await changePaperStatus(id, state);
      this.$message.success("切换成功");
    },
    //查看

    async PaperInfoList(id) {
      const res = await getPaperInfo(id);
      this.isShow = false;
      this.$nextTick((_) => {
        console.log("查看的res------", res);
        this.paperData = JSON.parse(res.check_question_list);
        this.viewData = res;
        this.kantiData = res.id;
        this.question = res.question_data;
        console.log(this.paperData, "paperData------------!!!");
        console.log(res.id, "ididididididi");
        console.log(" this.question==============", this.question);
      });
    },
    // 处理类型
    showQuestType(val) {
      const res = [];
      const arr = eval("(" + val + ")") || [];
      arr.map((item) => {
        if (item === 1) res.push("单选题");
        if (item === 2) res.push("多选题");
        if (item === 3) res.push("判断题");
        if (item === 4) res.push("简答题");
      });
      return res.join(",");
    },
    //看题
    kanTi(id) {
      this.kantiShow = true;
      console.log(id, "684613288645");
    },
    // 试题预览显示
    showInfo(val) {
      this.shijuanisShow = true;
      this.previewInfo = val;
      this.kantiShow = false;
    },

    //--------------------------------------------------
    toParse(val) {
      if (!val) return [];
      return JSON.parse(val);
    },
    fanhuilist() {
      this.isShow = true;

      window.location.reload();
    },
    chuangjainchuanzhi() {
      this.shijuanif = false;
    },
  },
};
</script>

<style scoped lang="scss">
.paper-filter {
  background-color: #fff;
  padding: 16px;
}
.el-date-editor--daterange {
  width: 200px;
}
.filter-bar {
  padding: 20px;
}

.hrcolor {
  color: #ccc;
}
.btr {
  position: absolute;
  right: 0;
}
.btR {
  position: absolute;
  right: 20px;
}
.abow_dialog {
  height: 80%;
}
.question-row {
  line-height: 30px;
}
.question-row b {
  color: #aaa;
  font-weight: normal;
  margin-right: 5px;
}
.question-name {
  height: 20px;
  overflow: hidden;
}
::v-deep .el-dialog {
  .el-dialog__body {
    height: 60vh;
    overflow: auto;
  }
}
</style>
